<template>
    <view>
        <view class="selete_box">
            <view class="selete">
                <text class="date_name">选择日期：</text>
                <view class="date_r">
                    <picker mode="date" :value="date" start="2022-09-01" end="2030-09-01" @change="bindDateChange">
                        <text>{{ date }}</text>
                        <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/info_more.png" mode="" />
                    </picker>
                </view>
            </view>
        </view>
        <view class="shop_list" v-for="(item, index) in dataList" :key="index">
            <view class="list_t">
                <view class="list_t_l">
                    <view></view>
                    <text>{{ item.shopName || '' }}</text>
                </view>
                <view class="list_t_r">
                    <text>已巡店</text>
                </view>
            </view>

            <view class="info">
                <text>巡检类型：门店巡检</text>
                <text>巡检时间：{{ item.patrolTime || '' }}</text>
                <text>巡检人员：{{ item.staffName || '' }}</text>
            </view>

            <view class="btn" :data-status="item.status" :data-item="item" @tap="goToPage">
                <text>查看</text>
            </view>
        </view>
        <view class="back_box">
            <text>{{ loadingTextClone }}</text>
        </view>
    </view>
</template>

<script>
const _request = require('../../utils/request.js');

export default {
    data() {
        return {
            date: '',
            pageNo: 1,
            flag: false,
            dataList: [],
            loadingText: '暂无更多',
            loadingTextClone: ''
        };
    },
    onLoad() {
        this.setData({
            date: this.getDate()
        });
        this.getInfoList();
        this.getDate();
    },
    onReachBottom() {
        if (!this.flag) {
            this.pageNo++;
            this.setData({
                loadingText: '加载中'
            });
            this.getInfoList();
        } else {
            this.setData({
                loadingText: '暂无更多'
            });
        }
    },
    methods: {
        goToPage(e) {
            let item = e.currentTarget.dataset.item;
            let data = {
                staffName: item.staffName,
                shopName: item.shopName,
                id: item.id,
                shopId: item.shopId
            };
            uni.navigateTo({
                url: '/pagesc/reportstore/index?type=info&status=2&item=' + JSON.stringify(data)
            });
        },

        bindDateChange(e) {
            this.setData({
                date: e.detail.value
            });
            this.getInfoList();
        },

        getInfoList() {
            this.setData({
                dataList: []
            });
            let data = {
                storeId: uni.getStorageSync('storeId'),
                pageSize: 15,
                pageNo: this.pageNo,
                patrolTime: this.date
            };

            _request.postObj('/shopPatrol/page', data).then((res) => {
                if (res.data.code == 200) {
                    if (res.data.data.length < 15) {
                        this.setData({
                            flag: true,
                            loadingText: '暂无更多'
                        });
                    }

                    let list = this.dataList.concat(res.data.data || []);

                    for (let i of list) {
                        if (i.patrolTime) {
                            i.patrolTime = i.patrolTime.replace('T', ' ');
                        }
                    }

                    this.setData({
                        dataList: list
                    });
                }
            });
        },

        getDate() {
            var date = new Date();
            var seperator1 = '-';
            var seperator2 = ':';
            var month = date.getMonth() + 1;
            var strDate = date.getDate();

            if (month >= 1 && month <= 9) {
                month = '0' + month;
            }

            if (strDate >= 0 && strDate <= 9) {
                strDate = '0' + strDate;
            }

            var currentdate =
                date.getFullYear() + seperator1 + month + seperator1 + strDate + ' ' + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds(); //年月日时分秒

            var currentmonth = date.getFullYear() + seperator1 + month + seperator1 + strDate; //获取年月

            return currentmonth;
        }
    }
};
</script>
<style>
page {
    background: #f1f1f1;
}

.selete_box {
    width: 750rpx;
    height: 120rpx;
    background: #ffffff;
}
.selete {
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.date_name {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 40rpx;
}
.date_r {
    display: flex;
    align-items: center;
}
.date_r text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-right: 10rpx;
}
.date_r image {
    width: 18rpx;
    height: 11rpx;
    margin-right: 40rpx;
}
.customize {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
}
.item {
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.active {
    font-size: 32rpx !important;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333 !important;
    border-bottom: 8rpx solid #e94a18;
}
.set image {
    width: 17rpx;
    height: 11rpx;
    margin-left: 5rpx;
}
.set text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.shop_list {
    width: 750rpx;
    height: 424rpx;
    background: #ffffff;
    margin-top: 20rpx;
}
.list_t {
    height: 100rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #e5e5e5;
    justify-content: space-between;
}
.list_t_l {
    display: flex;
    align-items: center;
    margin-left: 40rpx;
}
.list_t_l view {
    width: 8rpx;
    height: 8rpx;
    background: #e94a18;
    border-radius: 50%;
}
.list_t_l text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 10rpx;
}
.list_t_r {
    margin-right: 40rpx;
}
.list_t_r text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #999999;
}
.info {
    display: flex;
    flex-direction: column;
    height: 183rpx;
    margin: 0 40rpx;
    border-bottom: 1rpx solid #e5e5e5;
    justify-content: center;
}
.info text {
    line-height: 45rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.btn {
    width: 160rpx;
    height: 60rpx;
    background: #e94c19;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 39rpx auto;
}
.btn text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}
.back_box {
    width: 750rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.back_box text {
    color: #ccc;
}
</style>
